<template>
    <el-card v-loading="loading">
        <template #header>
            <h2>添加用户</h2>
        </template>
        <el-form :model="form" :rules="rules" ref="addForm"
        label-width="80px" label-position="left">
            <el-form-item label="姓名" prop="username">
                <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="form.gender">
                <el-radio label="1">男</el-radio>
                <el-radio label="0">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="cpassword">
                <el-input type="password" v-model="form.cpassword"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
                <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addUser">保存</el-button>
                <el-button @click="$router.push({name:'usersIndex'})">取消</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
import { addUser, fieldExist } from '@/api/users';

export default {
  name: 'usersAdd',
  data() {
    return {
      loading: false,
      rules: {
        username: [
          {
            required: true, message: '用户名必须填写',
          },
          //   {
          //     min: 2, max: 18, message: '用户:2-18个字母数字组合',
          //   },
          {
            validator: (rules, value, cb) => {
              if (/^[a-zA-Z0-9]{2,18}$/.test(value)) {
                cb();
              } else {
                cb(new Error('用户:2-18个字母数字组合'));
              }
            },
            trigger: 'change',
          },
          {
            validator: async (rules, value, cb) => {
              try {
                const { data } = await fieldExist('username', value);
                if (data) {
                  cb(new Error('用户名已存在'));
                } else {
                  cb();
                }
              } catch (error) {
                cb(new Error('服务器请求错误'));
              }
            },
            trigger: 'blur',
          },
        ],
        password: [
          { required: true, message: '密码必须填写' },
          {
            validator: (rules, value, cb) => {
              if (/^.{6,18}$/.test(value)) {
                cb();
              } else {
                cb(new Error('密码:6-18个字符'));
              }
            },
          },
        ],
        cpassword: [
          { required: true, message: '密码必须填写' },
          {
            validator: (rules, value, cb) => {
              if (this.form.password === value) {
                cb();
              } else {
                cb(new Error('两次密码不一致'));
              }
            },
          },
        ],
        phone: [
          {
            required: true, message: '手机号码必须填写',
          },
          //   {
          //     min: 2, max: 18, message: '用户:2-18个字母数字组合',
          //   },
          {
            validator: (rules, value, cb) => {
              if (/1[3456789]\d{9}$/.test(value)) {
                cb();
              } else {
                cb(new Error('手机格式错误'));
              }
            },
            trigger: 'change',
          },
          {
            validator: async (rules, value, cb) => {
              try {
                const { data } = await fieldExist('phone', value);
                if (data) {
                  cb(new Error('手机号码已存在'));
                } else {
                  cb();
                }
              } catch (error) {
                cb(new Error('服务器请求错误'));
              }
            },
            trigger: 'blur',
          },
        ],
        email: [
          {
            required: true, message: '邮箱必须填写',
          },
          //   {
          //     min: 2, max: 18, message: '用户:2-18个字母数字组合',
          //   },
          {
            validator: (rules, value, cb) => {
              if (/^.+@.+\..+$/.test(value)) {
                cb();
              } else {
                cb(new Error('邮箱格式错误'));
              }
            },
            trigger: 'change',
          },
          {
            validator: async (rules, value, cb) => {
              try {
                const { data } = await fieldExist('email', value);
                if (data) {
                  cb(new Error('邮箱已存在'));
                } else {
                  cb();
                }
              } catch (error) {
                cb(new Error('服务器请求错误'));
              }
            },
            trigger: 'blur',
          },
        ],
      },
      form: {
        gender: '1',
      },
    };
  },
  methods: {
    async addUser() {
      this.loading = true;
      try {
        await this.$refs.addForm.validate();
        await addUser({
          username: this.form.username,
          gender: this.form.gender,
          password: this.form.password,
          email: this.form.email,
          phone: this.form.phone,
        });
        this.$message.success('添加成功');
        this.$router.push({ name: 'usersIndex' });
        this.loading = false;
      } catch (error) {
        this.loading = false;
        // this.$message.error(error.response.data.message);
      }
    },
  },
};
</script>
